<template>
	<view class="container">
		<view class="content">
			<view class="wx-code"><image :src="$util.img(path)" /></view>
			<view class="get-coupon">
				<text class="coupon-name">{{ info.coupon_name }}</text>
				<view class="ns-text-color coupon-price uni-bold">￥{{ info.money }}</view>
				<text v-if="info.range_type == 1" class="coupon-name ns-text-color-gray">全场产品可使用(&nbsp;满{{ info.at_least }}使用)</text>
				<text v-else class="coupon-name ns-text-color-gray">仅限购买部分商品(&nbsp;满{{ info.at_least }}使用)</text>
				<text class="get-span" :class="button != '领取' ? 'ns-bg-color-gray' : 'ns-bg-color'" @click="receiveGoodsCoupon(info.coupon_type_id)">{{ button }}</text>
				<view class="ns-text-color-gray ns-font-size-sm tips">注:扫描二维码或点击右上角进行分享</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login" href="coupon_receive"></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		loadingCover,
		nsLogin
	},
	data() {
		return {
			info: {},
			couponTypeId: 0,
			path: '',
			button: '领取',
			uid: 0
		};
	},
	onLoad(data) {
		this.couponTypeId = data.coupon_type_id;

		if (data.source_uid) uni.setStorageSync('source_uid', data.source_uid);

		// 小程序扫码进入
		if (data.scene) {
			let sceneParams = data.scene.split('-');
			this.couponTypeId = sceneParams[1];
		}
	},
	onShow() {
		this.getCoupon(this.couponTypeId);

		this.getUserId();
	},
	mixins: [http],
	methods: {
		getCoupon(id) {
			this.sendRequest({
				url: 'System.Goods.getCoupon',
				data: {
					coupon_type_id: id
				},
				success: res => {
					if (res.code == 0) {
						let data = res.data.data;
						this.info = data;
						this.path = res.data.path;
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		receiveGoodsCoupon(coupon_type_id) {
			var isLogin = false;
			// #ifdef H5
			getApp().checkLogin(() => {
				isLogin = true;
				this.$refs.login.clickLogin();
			});
			// #endif
			// #ifdef MP
			getApp().$vm.checkLogin(() => {
				isLogin = true;
				this.$refs.login.clickLogin();
			});
			// #endif

			if (isLogin) return;

			this.sendRequest({
				url: 'System.Goods.receiveGoodsCoupon',
				data: {
					coupon_type_id: coupon_type_id
				},
				success: res => {
					switch (res.data) {
						case 1:
							this.$util.showToast({ title: '恭喜您，领取成功' });
							break;
						case -2010:
							this.$util.showToast({ title: '您已领取，请重复点击' });
							break;
						case -2021:
							this.$util.showToast({ title: '该优惠券不存在' });
							break;
						case -2011:
							this.$util.showToast({ title: ' 来迟了，已领完' });
							break;
						case -2019:
							this.$util.showToast({ title: '领取已达到上限' });
							break;
						default:
							this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		/**
		 * 获取当前用户id
		 */
		getUserId() {
			if (uni.getStorageSync('token')) {
				this.sendRequest({
					url: 'System.Member.getUserId',
					success: res => {
						if (res.data) this.uid = res.data;
					}
				});
			}
		}
	},
	/**
	 * 自定义分享内容
	 * @param {Object} res
	 */
	onShareAppMessage(res) {
		var title = '恭喜您获得一张' + this.info.money + '元的优惠券';
		if (this.info.range_type == 1) {
			title += `,满${this.info.at_least}全场可用`;
		} else {
			title += `,满${this.info.at_least}部分商品可用`;
		}
		var path = '/pages/goods/coupon_receive/coupon_receive?coupon_type_id=' + this.couponTypeId;
		if (this.uid) path += '&source_uid=' + this.uid;
		return {
			title: title,
			// imageUrl: this.$util.img(this.goodsDetail.img_list[0].pic_cover_big),
			path: path,
			success: res => {
				this.sendRequest({
					url: 'NsMemberShare.MemberShare.shareReward'
				})
			},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.container {
	background: #fff;
	padding: 0;
	height: 100%;
}

.content {
	background: url()
		no-repeat;
	background-size: 100% auto;
	height: 100%;
}

.wx-code {
	position: relative;
	margin: 0 auto;
	top: 34%;
	width: 320rpx;
	height: 320rpx;
	text-align: center;
	padding: 14rpx;
	box-shadow: 0 0 40rpx -2rpx;
}

.wx-code image {
	width: 320rpx;
	height: 320rpx;
}

.get-coupon {
	position: relative;
	margin: 0 auto;
	width: 560rpx;
	top: 37%;
	text-align: center;
	height: 366rpx;
	.coupon-name {
		font-size: $ns-font-size-base;
	}
}

.get-span {
	text-align: center;
	display: block;
	border-radius: 6rpx;
	margin-top: 29px;
	margin-bottom: 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
}

.get-coupon .tips {
	height: 40rpx;
}

.coupon-price {
	font-size: 52rpx;
	height: 76rpx;
}

button {
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
